<template>
	<view style="position: relative;width: 93%;">
		<!-- 顶部信息 -->
		<view class="signin-top" style="display: flex;padding: 50rpx 30rpx;">
			<view class="user-info-box" style="flex: 1;display: flex;"> 
				<view class="portrait-box">
					<image class="portrait" src="/static/missing-face.png" style="width: 112rpx;height: 112rpx;"></image>
				</view>
				<view class="info-box" style="line-height: 50rpx;padding-top: 10rpx;color: #fff;padding-left: 10rpx;">
					<text class="username">已连续签到0天</text>
					<p>今日签到客户的1积分</p>
				</view>
			</view>
			<view style="color: #fff;padding-top: 30rpx;">
				积分：1
			</view>
		</view>
		<!-- 签到信息 -->
		<view class="signin">
			 <p>连续签到领好礼</p>
			 <view class="signinday">
				 <view class="txview">
					<p>第1天</p>
					<image style="width: 6vw;height: 6vw;margin-top: 15rpx;" src="../../static/signin.png" mode=""></image>	
				</view>
				 <view class="txview">
				 	<p>第2天</p>
				 	<image style="width: 6vw;height: 6vw;margin-top: 15rpx;" src="../../static/signin.png" mode=""></image>	
				 </view>
				 <view class="txview">
				 	<p>第3天</p>
				 	<image style="width: 6vw;height: 6vw;margin-top: 15rpx;" src="../../static/signin.png" mode=""></image>	
				 </view>
				 <view class="txview">
				 	<p>第4天</p>
				 	<image style="width: 6vw;height: 6vw;margin-top: 15rpx;" src="../../static/signin.png" mode=""></image>	
				 </view>
				 <view class="txview">
				 	<p>第5天</p>
				 	<image style="width: 6vw;height: 6vw;margin-top: 15rpx;" src="../../static/signin.png" mode=""></image>	
				 </view>
				 <view class="txview">
				 	<p>第6天</p>
				 	<image style="width: 6vw;height: 6vw;margin-top: 15rpx;" src="../../static/signin.png" mode=""></image>	
				 </view>
				 <view class="txview">
				 	<p>第7天</p> 
				 	<image style="width: 6vw;height: 6vw;margin-top: 15rpx;" src="../../static/signin.png" mode=""></image>	
				 </view>
			 </view>
		</view>
		<!-- 签到按钮 -->
		<view class="signin-button">
			 已签到
		</view>
		<!-- 我的签到 -->
		<view class="mysignin">
			<view>我的签到</view>
			<view class="mysignin-info">
				<view class="mysignin-l1" style="background-color: #ff3348;">
					<p>1积分</p>
					<p>累积获得积分</p>
				</view>
				<view class="mysignin-l1" style="background-color: #fc6f48;">
					<p>3成长值</p>
					<p>累积获得成长值</p>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 签到天数
                days: 0,
                // 签到任务第一个
                play_number: 0,
                // 签到任务第二个
                search_number: 0,
                // 签到任务第三个
                full_ad: 0,
                // 已完成天数
                completeDay: 0,
                // 签到状态 0.代表未签到 1.代表已签到
                taskStatus: 0.,
                // 签到规则
                rule: '这里是签到规则，你可以任意编辑',
                // 签到任务奖励数组
                dayList: [1, 1, 2, 3, 5, 6, 7],
                // 签到任务
                taskList: [{
                        title: '试玩游戏',
                        img: '../../static/yx.png',
                        number: 1,
                        dec: '完成游戏赚相关游戏'
                    },
                    {
                        title: '试玩应用',
                        img: '../../static/zl.png',
                        number: 1,
                        dec: '完成应用赚相关任务'
                    },
                    {
                        title: '观看广告',
                        img: '../../static/kgg.png',
                        number: 10,
                        dec: '观看广告赚相关广告'
                    }
                ]
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			// 获取用户签到得相关信息，自己写接口获取即可
            getData() {

            },
            // 签到并领取奖励
            receiveMoney() {
                uni.showToast({
                    title: "签到成功并获得奖励",
                    icon: 'none',
                    position: 'bottom'
                })
            },

            // 签到任务完成
            listTab(i) {
                if (i == 0) {
                    uni.showToast({
                        title: "跳转第一个任务",
                        icon: 'none',
                        position: 'bottom'
                    })
                }
                if (i == 1) {
                    uni.showToast({
                        title: "跳转第二个任务",
                        icon: 'none',
                        position: 'bottom'
                    })
                }
                if (i == 2) {
                    uni.showToast({
                        title: "跳转第三个任务",
                        icon: 'none',
                        position: 'bottom'
                    })
                }

            }
		}
	}
</script>

<style scoped lang="scss"> 
	.signin-top{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 350rpx;
		background-color: #ff5959;
		border-radius: 100% 100% 100% 100% / 0% 0% 30% 30%;
		.user-info-box{
			height: 180rpx;
			display:flex;
			align-items:stretch;
			/* position:relative; */
			z-index: 1;
			.portrait{
				width: 120rpx;
				height: 120rpx;
				border:7rpx solid #fff;
				border-radius: 50%;
			}
			.username{
				// font-size: $font-lg + 6rpx;
				color: #fff;
				margin-left: 20rpx;
			}
		}
	}
	.portrait-box{
		width: 126rpx;
		height: 126rpx;
		border: 8rpx solid #fff;
		border-radius: 50%;
	}
	.signin{
		width: 86vw;
		height: 242rpx;
		background: #fff;
		position: absolute;
		top: 225rpx;
		left: 4vw;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		
	}
	.signinday{
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between
	}
	.txview{
		width: 12vw;
		height: 110rpx;
		background: #f6f6fb;
		text-align: center;
		font-size: 24rpx;
		padding-top: 8rpx;
	}
	.signin-button{
		width: 60vw;
		height: 80rpx;
		background: #e1e1e1;
		position: absolute;
		top: 480rpx;
		left: 20vw;
		border-radius: 50rpx;
		line-height: 80rpx;
		 text-align: center;
		 font-size: 30rpx;
		 color: #303133;
	}
	.mysignin {
	    width: 86vw;
	    height: 250rpx;
	    background: #fff;
	    position: absolute;
	    top: 590rpx;
	    left: 4vw;
	    border-radius: 20rpx;
	    padding: 25rpx;
	}
	
	.mysignin-info {
	    top: 590rpx;
	    height: 150rpx;
	    display: flex;
		justify-content: space-between;
		padding-top: 15rpx;
	}
	
	.mysignin-l1 {
	    width: 37vw;
	    height: 130rpx;
		border-radius: 20rpx;  
		color: #fff;
		font-size: 20rpx;
		padding-top: 40rpx;
		line-height: 50rpx;
		padding-left: 20rpx;
	}
</style>
